<!-- 
 * @功能描述: base menu demo
 * @author: lzn
 * @date: 2022-09-22 16:38:18
 * @version: 1.0
-->
<script setup>
import { onBeforeMount, ref, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
const selectKey = ref();

onBeforeMount(() => {
  watch(
    () => route.path,
    (path) => {
      selectKey.value = path;
    },
  )
})

function noFresh(path, e) {
  e.preventDefault();
  selectKey.value = path;
  router.push(path);
}

const menuItem = [
  { path: '#1', label: '基础文本显示框' },
  { path: '#2', label: '基础菜单' },
  { path: '#3', label: '基础文本输入框' },
]
</script>

<template>
  <ul class="yw-base-menu yw-menu-overflow">
    <li 
      class="menu-item" 
      :class="selectKey === menu.path && 'selected'" 
      v-for="menu in menuItem"
    >
      <a :href="menu.path" @click="noFresh(menu.path, $event)">
        <span>{{ menu.label }}</span>
        <span class="menu-item-sub-title" v-if="menu.title">{{ menu.title }}</span>
      </a>
    </li>
  </ul>
</template>

<style scoped>

</style>